[#73831] Sprints column scroll bar overlaps content#23119
Conversation
There was a problem hiding this comment.
Pull request overview
Adjusts Backlogs “Sprint planning” layout styling to prevent the sprints column scrollbar from overlapping content by tweaking page padding and simplifying/retargeting sprint planning container styles.
Changes:
- Extends Backlogs backlog show page content to the right side (
extended-content--right) to remove right padding constraints. - Refactors sprint header and sprint planning layout styles to focus on
.op-sprint-*selectors. - Updates the side-by-side divider styling for sprint planning columns in container queries.
efa3345 to
85adc61
Compare
85adc61 to
b203f07
Compare
|
|
||
| .controller-backlogs\/backlog.action-show | ||
| .controller-backlogs\/backlog.action-show, | ||
| .controller-backlogs\/backlog.action-details |
There was a problem hiding this comment.
FYI, we need to apply this to both action-details and action-show. Turbo-loaded pages do not set the correct page class.
(I do not understand why this wasn't a problem for #23118 however)
HDinger
left a comment
There was a problem hiding this comment.
I am not really happy with this. This solution is indeed hacky and not very future proof. Further, there are also still some issues. Since you are extending the content to the right, the header line is missing the spacing to the edge:
In order to fix this, you'd need to extend the hack even more which leads me again to the question of whether we really need the scrollbars.. Technically, it would be much easier and future proof to just hide them. I'd also argue that you don't necessarily need them from a UX point of view but this is not my call.
So please clarify that. If the decision is to show the scrollbar, the spacing for the header needs to be added again. Otherwise this will bite us as soon as we add a button to the PageHeader.
b203f07 to
a7e2efc
Compare
|
@HDinger @bsatarnejad I've simplified the |
Removes `_master_backlog.sass` rules tied to UI primitives that were deleted in #22740 but were not cleaned up alongside them: `.op-backlogs-header` and its modifiers, `.op-backlogs-container`, `.op-backlogs-lists`, and the `backlogsListsContainer` container queries that targeted the old header layout.
Centralizes the `#content:has(#content-bodyRight > *)` selector into a `split-pane-active` mixin so it is defined in one place. Purely mechanical — no behavioral change.
344b931 to
9cd4b59
Compare
Note
This PR is based on #23118. Please review/merge that PR first.
Ticket
https://community.openproject.org/wp/73831
What are you trying to accomplish?
Fix padding so that scrollbars do not overlap content.
Screenshots
What approach did you choose and why?
Important
This PR also cherry-picks 9071b9b from #22936 (now merged into
dev)Targets
#content-bodypadding directly instead of using the broadextended-content--rightmixin, which was also zeroing#content-headerpadding (causing the header spacing regression flagged in review). A follow-up commit extracts the#content:has(#content-bodyRight > *)selector into asplit-pane-activeSass mixin to centralize it.Merge checklist